<template>
     <el-table :data="tableData" stripe  border  style="width: 100%" ref="multipleTableRef">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="reservationid" label="ID" width="100" />
        <el-table-column prop="room.rtype" label="房型" width="120" />
        <el-table-column prop="room.rnmb" label="房号" width="120" />
        <el-table-column prop="member.mname" label="预定人" width="120" />
        <el-table-column prop="member.tel" label="电话" width="120" />
        <el-table-column prop="indate" label="入住时间" width="120" />
        <el-table-column prop="outdate" label="退房时间" width="120" />
        <el-table-column prop="resdate" label="预订日期" width="120" />
        <el-table-column prop="room.price" label="单日金额" width="100" />
        <el-table-column prop="room.ustate" label="客房状态" width="100">
            <template #default="scope"> 
                  <el-tag class="ml-2" type="success" effect="light" round  v-if="scope.row.room.ustate == 1">未入住</el-tag>
                  <el-tag class="ml-2" type="warning" effect="light" round  v-if="scope.row.room.ustate == 2">维护中</el-tag>
                  <el-tag class="ml-2" type="danger"  effect="light" round v-if="scope.row.room.ustate == 3">已入住</el-tag>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
        <template #default="scope">
           <el-button  type="success" size="small"  @click="handleCheckIn(scope.$index)"  :disabled="scope.row.room.ustate != 1">入住</el-button>
           <el-button  type="primary" size="small" @click="handleUpdate(scope.$index)" :disabled="scope.row.room.ustate == 3">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

<script>
import {reservationList,checkInChargeOper} from '../api/reservation'
import { toRefs,reactive,ref } from 'vue'
import { ElMessage } from 'element-plus'

    export default{
      setup(){
            const datax =  reactive( { tableData : []} )  //返回一个对象的响应式代理
            async  function loadData(){
                  const  repData = await reservationList();
                  datax.tableData = repData;
            }
            loadData();

            function handleCheckIn(i){
                  console.log( datax.tableData[i].reservationid)
                  checkInChargeOper(datax.tableData[i].reservationid);
            }

            return{
                  ...toRefs(datax),
                  handleCheckIn
            }
      }
    }
</script>